<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夜光雨</title>
    <style>
        :root{--background-color:black}@property --M{syntax:"<percentage>";inherits:false;initial-value:0%}body{padding:0;margin:0;min-height:100vh;display:grid;place-items:center;font-family:"Chakra Petch",sans-serif;overflow:hidden;letter-spacing:0.4em;background:var(--background-color);perspective:900px;transform-style:preserve-3d}.scene{position:absolute;width:600px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;transform:rotateX(70deg);perspective:1200px;transform-style:preserve-3d;isolation:isolate}span{position:relative;width:calc(100% / 5);aspect-ratio:1;display:inherit;align-items:inherit;justify-content:inherit;transform:rotateX(-52deg);filter:drop-shadow(0 3px 20px #fff)
  drop-shadow(0 2px 5px rgba(0,229,255,.7));&:before{content:'';position:absolute;left:0;right:0;bottom:60px;margin:auto;width:4px;height:300vh;background:rgba(255,255,255,.7);mask:200px linear-gradient(to bottom,white var(--M),transparent 0%)}i{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,transparent 50%,white 90%);transform:scale(0);box-shadow:0 0 5px 5px white,inset 0 0 5px 5px white}&.active{&:before{animation:light .8s cubic-bezier(0.34,1.56,0.64,1) forwards}i{animation:wave .9s 2.2s linear forwards;animation-delay:calc((sqrt(var(--j)) - .7) * .7s)}}}@keyframes wave{0%{opacity:1;transform:translateY(0) scale(0)}100%{opacity:0;transform:translateY(calc(pow(var(--j),.5) * 9px)) scale(calc(sqrt(var(--j)) * 1))}}@keyframes light{0%{--M:0%;opacity:1}99%{--M:100%}100%{opacity:0;--m:0%}}
    </style>
</head>

<body>
<div class="scene">
        <span class="light" style="--i: 1;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 2;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 3;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 4;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 5;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="test" style="--i: 6;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 7;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 8;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 9;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 10;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 11;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 12;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 13;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 14;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 15;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 16;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 17;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 18;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 19;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 20;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 21;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 22;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 23;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 24;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
    <span class="light" style="--i: 25;">
            <i style="--j: 1;"></i>
            <i style="--j: 2;"></i>
            <i style="--j: 3;"></i>
            <i style="--j: 4;"></i>
            <i style="--j: 5;"></i>
        </span>
</div>
</body>
<script>
    function getRandomIndices(count, max) {
    let indices = new Set();
    while (indices.size < count) {
        indices.add(Math.floor(Math.random() * max));
    }
    return Array.from(indices);
}
function getRandomDelay(min, max) {
    return Math.random() * (max - min) + min;
}
let animate = (duration) => {
    const interval = 1200;
    const start = performance.now();
    let lastUpdate = 0;
    const numClasses = 1;
    const minDelay = 1000;
    const maxDelay = 2500;
    function step(timestamp) {
        if (timestamp - lastUpdate >= interval) {
            lastUpdate = timestamp;
            let test = document.querySelectorAll('.light');
            let elements = Array.from(test);
            let indices = getRandomIndices(numClasses, elements.length);
            indices.forEach((index) => {
                if (index < elements.length) {
                    elements[index].classList.add('active');

                    setTimeout(() => {
                        elements[index].classList.remove('active');
                    }, getRandomDelay(minDelay, maxDelay));
                }
            });
        }
        requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
}

animate(0);
</script>
</html>